<template>
  <div>
    <el-table
      :data="tableData"
      border
      max-height="99999"
      class="ccui-form-child-table"
      ref="materialList"
      @cell-click="cellClick"
      :cell-style="cellStyle"
    >
      <el-table-column
        v-for="(item, i) in tableColumnSendOutList"
        :label="item.label"
        :type="item.type"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :key="i"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="scaleNum"
        label="操作"
        align="center"
        header-align="center"
        appendixInfor.vue
        min-width="70%"
      >
        <template slot-scope="{ row}">
          <span
            style="color: #0089ef; cursor: pointer"
            @click="showDialog(row)"
            >物流跟踪</span
          >
        </template>
      </el-table-column>
    </el-table>
    <logisticsTracking :detail="detail" :dialogVisible.sync="isShowDialog" />
  </div>
</template>

<script>
import logisticsTracking from "../../../components/logisticsTracking/logisticsTracking";
import {queryLogisticsInfo} from "../../../orderSearch/api";
export default {
  name: "sendOutList",
  components: {
    logisticsTracking
  },
  data() {
    return {
      detail: [],
      isShowDialog: false,
      tableData: [],
      tableColumnSendOutList: [
        {
          type: "index",
          label: "序号"
        },
        {
          label: "发货单编号",
          prop: "shipCode"
        },
        {
          label: "发货日期",
          prop: "buildDate"
        },
        {
          label: "状态",
          prop: "shipStatusName"
        }
      ]
    };
  },
  methods: {
    goToDeliveryDetail(row) {
      this.$router.push({
        path: `/orderManagement/close/sub-detail/${row.id}`,
        query: {
          type: this.$route.query.type,
          id: row.id
        }
      });
    },
    showDialog(data) {
      console.log("data", data);
      let obj = {
        id: data.id,
        type: 2
      };
      queryLogisticsInfo(obj).then(res => {
        console.log(res.data.data);
        this.detail = res.data.data
        this.isShowDialog = true;
      });
    },
    // 单元格点击
    cellClick(row, column) {
      // console.log("单元格点击", row, column);
      if (column.label === "发货单编号") {
        this.goToDeliveryDetail(row);
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (["shipCode"].includes(column.property)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    }
  }
};
</script>

<style scoped></style>
